<script setup lang="ts">
import { showToast } from 'vant'
import { ref, computed } from 'vue'

// 引入路由 -lxz
import { useRoute, useRouter } from 'vue-router'
//构建路由方法对象 -lxz
const router = useRouter()
// 构建路由参数对象 -lxz
const route = useRoute()

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { FilmDataObj } from '../../stores/LXZ'

// 获取pinia实例内容
const Oder = FilmDataObj()

// 获取pinia数据使用这种方式
const { CurrentOrders } = storeToRefs(Oder)
console.log('CurrentOrders', CurrentOrders.value)
// 过滤
const langstr = computed(() => {
  return CurrentOrders.value.dateinfo.substr(14, 4)
})


const onSubmit = () => showToast('点击按钮')
const value = ref(3)
// 设置返回方法 -lxz
const BackClick = () => {
  if (route.query.Tip == '支付成功') {
    // router.replace({ name: 'cinemaDetails', query: { id: CurrentOrders.value.CinemaId } })
    router.go(-2)

  } else {
    router.back()
  }
}
// 取票码显示隐藏
let QPshow = ref(false)


const showRate = computed(() => {
  let end = new Date(CurrentOrders.value?.TicketDate + " " + CurrentOrders.value?.Playtime.slice(-5));
  let currentTime = new Date()
  if (end - currentTime <= 0) {
    return true
  }else{
    return false
  }
})

</script>




<template>
  <div class="order" :class="route.query.Tip == '支付成功' ? 'order-pay' : ''">
    <header>
      <van-icon name="arrow-left" color="#000" size="24" @click="BackClick" />
      <div class="title" :class="route.query.Tip == '支付成功' ? 'pay' : ''">
        {{ route.query.Tip }}
      </div>
    </header>
    <div class="public">
      <div class="vote">
        <div class="vote-info">
          <div class="nm">{{ CurrentOrders.name }}</div>
          <div class="time">{{ langstr }}</div>
          <div class="cinema">
            <div style="display: flex; justify-content: space-between">
              <span>{{ CurrentOrders.TicketDate }}</span>
              <span style="width: 30vw">{{ CurrentOrders.lobbySeats }}</span>
            </div>
            <div style="display: flex; justify-content: space-between; font-size: 14rem; color: #333">
              <span>{{ CurrentOrders.Playtime }}</span>
              <div class="Seat" style="width: 30vw">
                <span v-for="item in CurrentOrders.Seat" :key="item">{{ item }}&nbsp;</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <van-image width="60rem" height="80rem" fit="cover" radius="8rem" :src="CurrentOrders.img" />
        </div>
      </div>
      <div class="vote" style="justify-content: space-between">
        <div class="service">
          <span style="margin-right: 4rem" @click="QPshow = !QPshow">展开取票码
            <van-icon name="arrow-down" v-show="QPshow" />
            <van-icon name="arrow-up" v-show="!QPshow" />
          </span>
          <div class="detail" v-show="QPshow">
            <div class="detail-info">
              <div class="detail-info-title">取票码</div>
              <div class="detail-info-content">{{ CurrentOrders.movieId }}</div>
            </div>
            <div class="detail-info">
              <div class="detail-info-title">取票号</div>
              <div class="detail-info-content">{{ CurrentOrders.PlaceAnOrderTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="public" v-if="showRate">
      <div class="rate">
        <p>评价电影</p>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
          <span style="font-size: 12rem; color: #333">可以拖动星星评分</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.order {
  background: linear-gradient(to bottom, #696969, #fff);
  height: 100vh;

  header {
    display: flex;
    align-items: center;
    padding: 12rem 6rem;

    .title {
      width: 90%;
      text-align: center;
      font-size: 14rem;
      font-weight: bold;
    }
  }

  .public {
    width: 94%;
    margin: auto;
    margin-top: 8rem;
    background: #fff;
    border-radius: 12rem;
  }

  .vote {
    padding: 12rem;
    display: flex;

    justify-content: space-between;

    .vote-info {
      margin-left: 8rem;
      font-size: 12rem;
      color: #adadad;
      line-height: 20rem;

      .nm {
        font-size: 18rem;
        color: #000;
        font-weight: 600;
        margin: 8rem 0;
      }

      .time {
        color: #949494;
        font-weight: 600;
        margin-bottom: 12rem;
      }

      .cinema {
        width: 60vw;
      }
    }

    .service {
      display: flex;
      font-size: 12rem;
      align-items: center;
      justify-content: center;
      flex-flow: column;
      color: #333;
      width: 100%;
      padding: 12rem 0;
      border-top: 1px dashed #adadad;
    }

    .detail {

      color: #8e8e8e;
      font-size: 12rem;
      margin-right: 12rem;

      .detail-info {
        line-height: 30rem;
        display: flex;

        .detail-info-title {
          margin-right: 120rem;
        }
      }
    }
  }

  .rate {
    padding: 12rem;
    line-height: 40rem;

    p {
      margin: 0;
    }
  }

  // 如果是支付成功后更改样式
  .pay {
    color: white;
  }
}

.order-pay {
  background: linear-gradient(to bottom, #e64646, #fff);
}
</style>